<template>
  <div class="container">
    <div class="top-bt">
      <el-button type="back" icon="el-icon-arrow-left" @click="GoBack">返回</el-button>
      <!--<el-button type="Submit" @click="submit">提交</el-button>-->
    </div>
    <div class="body-box">
      <h1>{{this.$route.params.title}}</h1>
      <div class="repulse-back">
        <img src="@/assets/image/shanchu.png" alt />
        <h1>审核不通过</h1>
        <!--<h2>1.由于您提交的资料和填写的不一致，无法通过审核请重新提交。</h2>
        <h2>2.图片模糊，错别字太多；</h2>-->
        <h2 v-for="item in Thinglist" :key="item.id">{{item.opinion}}</h2>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!--输入框-->
        <el-form-item label=" 标题：" prop="title">
          <el-input v-model="ruleForm.title" placeholder="请输入标题" :disabled="true"></el-input>
        </el-form-item>
        <!--输入框-->
        <el-form-item label="  来源：" prop="source">
          <el-input v-model="ruleForm.source" placeholder="请输入来源" :disabled="true"></el-input>
        </el-form-item>

        <!-- 富文本编辑器组件 -->
        <!-- <Editor v-model="text"></Editor> -->
        <div class="text-editor-box">
          <h1 class="h1-2">内容：</h1>
          <quill-editor v-model="ruleForm.context" :disabled="true"/>
          <div class="bt-group">
            <Before-looking :ruleForm="ruleForm" modular="亦廉课堂查看"></Before-looking>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
// import Preview from '@/components/preview/Preview.vue'
import BeforeLooking from "@/components/Looking/BeforeLooking";

export default {
  components: {BeforeLooking},
  data() {
    return {
        paramsThing: {
        bussGroup: "1",
        bussId: "1",
        pageNum: "1",
        pageSize: "10",
      },
      Thinglist: [],
      ruleForm: {
        title: "",
        source: "",
        context: "",
      },
      rules: {},
    };
  },
  created() {
    this.gettRotationBianJi();
    this.GetThing();
  },
  computed:{
    itemId(){
      return this.$route.params.id
    }
  },
  methods: {
    // 调用审查意见接口
    GetThing() {
      this.Api.getThing({
        bussGroup: "cflt-ylkt",
        bussId: this.itemId,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        // console.log(res, 111111);
        this.Thinglist = res.data.records;
      });
    },
    //   返回
    GoBack() {
      this.$router.go(-1);
    },
    // 提交
    submit() {
      this.Api.getForumClassChange({
        id:this.$route.params.id,
        title: this.ruleForm.title,
        source: this.ruleForm.source,
        context: this.ruleForm.context,
      }).then((res) => {
        // console.log(res, 111);
        if (res.code === "0") {
          this.$router.go(-1);
        }
      });
    },
    //请求数据单个查询渲染
    gettRotationBianJi() {
      // console.log(this.$route.params.id, 121212);
      this.Api.getForumClassEach({ id: this.$route.params.id }).then((res) => {
        // console.log(res,111)
        this.$set(this.ruleForm, "title", res.data.title);
        this.$set(this.ruleForm, "source", res.data.source);
        this.$set(this.ruleForm, "context", res.data.context);
        // console.log(this.$route.params.id, 111);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 0;
  .top-bt {
    display: flex;
    justify-content: space-between;
    background: rgba(240, 242, 245, 1);
    padding-bottom: 20px;
    .el-button--back {
      width: 70px;
      height: 36px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(221, 221, 221, 1);
      color: rgba(51, 51, 51, 1);
      padding: 0;
    }
    .el-button--Submit {
      width: 70px;
      height: 36px;
      background: rgba(61, 127, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(221, 221, 221, 1);
      color: #ffffff;
      padding: 0;
    }
  }
  .body-box {
    > h1 {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 60px;
      text-align: center;
      border-bottom: 1px solid #e4e7ed;
      margin-bottom: 20px;
    }
    .el-form {
      margin-top: 20px;
      padding-left: 41px;
    }
  }
}

// 富文本编辑器
.text-editor-box {
  display: flex;
  .h1-2 {
    width: 85px;
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    text-align: right;
  }
  .h1-2::before {
    content: "* ";
    color: #ff0000;
  }

  /deep/.bt-group {
    display: flex;
    align-items: flex-end;
    position: relative;
    .el-button--preview {
      width: 70px;
      height: 36px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(61, 127, 255, 1);
      color: #3d7fff;
      padding: 0;
      margin-left: 10px;
      position: absolute;
      bottom: -30px;
    }
  }
  .quill-editor {
    /deep/.ql-container {
      min-height: 20vh;
      
    }
  }
}
/deep/.quill-editor {
  width: 1350px;

  .ql-blank {
    padding-left: 0px;
  }
  .ql-containe {

  }
}
//form表单
/deep/.el-form {
  .el-form-item {
    margin: 0 0 16px 0;
    .el-form-item__label {
      width: 85px !important;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      padding: 0;
    }
    .el-form-item__content {
      margin-left: 85px !important;
      .el-input__inner {
        width: 460px;
        height: 36px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(221, 221, 221, 1);
        padding-left: 12px;
      }
    }
  }
  .pic-box {
    display: flex;
    padding-bottom: 10px;
    .h1-1 {
      width: 85px;
      height: 22px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      text-align: right;
    }
    .h1-1::before {
      content: "* ";
      color: #ff0000;
    }
  }
  .flex-box {
    display: flex;

    .pic-Tips {
      width: 360px;
      padding-top: 6px;
      padding-bottom: 15px;
      border-top: 1px solid #dddddd;
      margin-left: 82px;
      h1 {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 22px;
      }
    }
  }
}
//审核不通过
.repulse-back {
  width: 1540px;
  background: rgba(255, 240, 239, 1);
  border-radius: 3px;
  border: 1px solid rgba(255, 171, 166, 1);
  padding: 25px 0 25px 61px;
  margin: 0 auto;
  position: relative;
  > h1 {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 16px;
    margin-bottom: 6px;
  }
  > h2 {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 24px;
  }
  img {
    position: absolute;
    top: 21px;
    left: 25px;
  }
}
</style>